<template>
  <swiper class="frame" ref="mySwiper" :options="swiperOptions">
    <swiper-slide><img class="wallpaper" src="//gw.alicdn.com/imgextra/i1/11/O1CN01beEZkz1Bx4zomEqJw_!!11-0-lubanu.jpg"></swiper-slide>
    <swiper-slide><img class="wallpaper" src="//gw.alicdn.com/imgextra/i1/146/O1CN01GBrlbZ1CwuSvHY7z0_!!146-0-lubanu.jpg"></swiper-slide>
    <swiper-slide><img class="wallpaper" src="//gw.alicdn.com/imgextra/i3/57/O1CN014aoExZ1CI9DQresUC_!!57-0-lubanu.jpg"></swiper-slide>
    <swiper-slide><img class="wallpaper" src="//gw.alicdn.com/imgextra/i4/137/O1CN01tAFudt1CsmtjM5xCZ_!!137-0-lubanu.jpg"></swiper-slide>
    <swiper-slide><img class="wallpaper" src="https://aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg"></swiper-slide>
  </swiper>
</template>

<script>
import {Swiper, SwiperSlide, directive} from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
import Swiper2, {Navigation, Pagination, Autoplay} from 'swiper';

Swiper2.use([Navigation, Pagination, Autoplay]);

  export default {
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        swiperOptions:{
          loop:true,//循环
          autoplay: {
            delay: 3000, //3秒切换一次
            disableOnInteraction: false
          },
        }
      }
    }
  }
</script>

<style>
  .frame{
      margin: auto;
      margin-top: -30px;
      width: 504px;
      display: flex;
      flex-wrap: wrap;
      background-color: #f0f0f0;
  }
  .wallpaper{
    height: 180px;
  }
</style>